// 客户资料
<template>
  <div class="customer">
    <el-container>
      <el-main>
        <div ref="person">
          <el-row class="bgc">
            <el-col :span="24"> 个人信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="本人姓名">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="手机号码1">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="身份证">
                  <el-input v-model="formLabelAlign.type" />
                </el-form-item>
                <el-form-item label="年龄">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="有无子女">
                  <el-radio-group v-model="formLabelAlign.region" class="ml-4">
                    <el-radio label="1" size="large"> 有</el-radio>
                    <el-radio label="2" size="large">无</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="QQ">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="家人是否知晓">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1" class="personStyle">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="性别">
                  <el-radio-group v-model="formLabelAlign.region" class="ml-4">
                    <el-radio label="1" size="large">男</el-radio>
                    <el-radio label="2" size="large">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码2">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="学历">
                  <el-select v-model="formLabelAlign.region" placeholder="请选择">
                    <el-option label="6个月" value="6个月" />
                    <el-option label="12个月" value="12个月" />
                    <el-option label="18个月" value="18个月" />
                    <el-option label="24个月" value="24个月" />
                  </el-select>
                </el-form-item>
                <el-form-item label="婚姻状况">
                  <el-radio-group v-model="formLabelAlign.region" class="ml-4">
                    <el-radio label="1" size="large">男</el-radio>
                    <el-radio label="2" size="large">女</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
                <el-form-item label="微信">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

        <div ref="address">
          <el-row class="bgc">
            <el-col :span="24">居住信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="居住情况">
                  <el-select v-model="formLabelAlign.region" placeholder="请选择">
                    <el-option label="个人" value="个人" />
                    <el-option label="对公" value="对公" />
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="现居住时长">
                  <el-input v-model="formLabelAlign.type" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="现居住地">
                  <el-select v-model="formLabelAlign.region" placeholder="请选择">
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
                <el-form-item label="住宅电话">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

        <div ref="property">
          <el-row class="bgc">
            <el-col :span="24">资产信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="房产">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="车产">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="个人年收入">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="数量">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="数量">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

        <div ref="linkman">
          <el-row class="bgc">
            <el-col :span="24">联系人信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="配偶姓名">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="移动电话">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="直系亲属姓名">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="移动电话">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="其他联系人姓名">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="移动电话">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="工作单位">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item>
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="关系">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="工作单位">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="关系">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="工作单位">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

        <div ref="job">
          <el-row class="bgc">
            <el-col :span="24">职业信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="参与工作时间">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="是否缴纳社保">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="现单位地址">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="详细地址">
                  <el-input v-model="formLabelAlign.type" />
                </el-form-item>
                <el-form-item label="单位电话">
                  <el-input v-model="formLabelAlign.type" />
                </el-form-item>
                <el-form-item label="现单位职位">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
                <el-form-item label="入职时间">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="现单位名称">
                  <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="是否缴纳公积金">
                  <el-radio-group v-model="formLabelAlign.region" class="ml-4">
                    <el-radio label="1" size="large">有</el-radio>
                    <el-radio label="2" size="large">无</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="现单位部门">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
                <el-form-item label="单位性质">
                  <el-input v-model="formLabelAlign.type"> </el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>

        <div ref="identity">
          <el-row class="bgc">
            <el-col :span="24">身份认证信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="身份证正/反面">
                  <el-image style="width: 120px; height: 120px" :src="url" :zoom-rate="1.2" :preview-src-list="srcList" :initial-index="4" fit="cover" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="11" :offset="1">
              <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="手持身份证">
                  <el-image style="width: 120px; height: 120px" :src="url" :zoom-rate="1.2" :preview-src-list="srcList" :initial-index="4" fit="cover" />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-aside width="200px">
        <div class="customer-right">
          <div v-for="(item, index) in refList" :key="index" @click="handle(item, index)" :class="[activeId == index ? 'active' : 'box1']">
            {{ item.text }}
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";

const labelPosition = ref("right");
const borrow = ref(null);
const person = ref(null);
const address = ref(null);
const linkman = ref(null);
const job = ref(null);
const identity = ref(null);
const property = ref(null);

const activeId = ref(null);

const formLabelAlign = reactive({
  name: "",
  region: "",
  type: "",
});
const url = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";
const srcList = [
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
];
const refList = reactive([
  { name: person, text: "个人信息" },
  { name: address, text: "居住信息" },
  { name: property, text: "资产信息" },
  { name: linkman, text: "联系人信息" },
  { name: job, text: "职业信息" },
  { name: identity, text: "身份认证信息" },
]);

function handle(item, index) {
  activeId.value = index;
  item.name.scrollIntoView();
}
</script>
<style lang="scss" scoped>
.customer {
  overflow: auto;
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.box1 {
  text-align: center;
  color: #999;
  border-bottom: 1.5px solid #e4e4e4;
  &:hover {
    cursor: pointer;
    color: #000;
  }
}
:deep(.el-aside) {
  margin-top: 5px;
  background: #fff;
}
:deep(.el-main) {
  padding: 0;
  // flex: 80%;
}
.active {
  text-align: center;
  color: #000;
  border-bottom: 2px solid #000;
}
.personStyle {
  margin-right: 20px;
}
:deep(.el-form-item--default) {
  margin-bottom: 5px;
}
:deep(.el-select) {
  width: 100%;
}
.customer-right {
  position: fixed;
  border: 1px solid #e4e4e4;
  padding: 20px;
}
</style>
